<template>
  <div
    class="session-wrapper"
    style="min-width: 1040px;
    min-height: 99.9vh;
    position: relative;"
  >
    <canvas id="canvas" />
    <div class="ui container">
      <div class="session-body">
        <!-- 左边 -->
        <div class="session-sidebox">
          <div class="session-sidebox__container">

            <div class="session-sidebox__header">
              <div class="session-sidebox__logo">
                <a href="/" draggable="false">
                  <img alt="logo" src="@/assets/images/logos/yntx-logo-big.png" draggable="false">
                </a>
              </div>
              <h1 class="session-sidebox__title" />
              <h2 class="session-sidebox__subtitle">
                与你同行基金平台
              </h2>
            </div>

            <div class="session-sidebox__content">
              <div class="session-sidebox-content__container">
                <div class="session-sidebox-comments__header">
                  <span class="session-sidebox-comments__title">{{ FamousSaying.name }}</span>
                  <span class="session-sidebox-comments__position">{{ FamousSaying.title }}</span>
                </div>
                <div class="session-sidebox-comments__content">
                  {{ FamousSaying.joke }}
                </div>
              </div>
            </div>

            <div class="session-sidebox__footer">
              <a href="/" target="_blank" one-link-mark="yes">
                <strong class="session-sidebox__icon-hot">与你同行</strong>
                <span class="session-sidebox__divider">-</span>
                基金平台
                <i class="iconfont icon-arrow-circle-right " />
              </a>
            </div>
          </div>

        </div>
        <!-- 右边 -->
        <div class="session-form">
          <div class="session-form__container is-register">
            <header class="session-form__header">
              <h2 class="session-form__title">
                <span>登录</span>
              </h2>
              <span class="pull-right">
                <span class="have-account">没有账号</span>
                <a href="/register" one-link-mark="yes" draggable="false">点此注册</a>
              </span>
            </header>

            <el-form
              ref="loginForm"
              :model="loginForm"
              :rules="loginRules"
              label-position="left"
              label-width="0px"
              class="login-form"
              size="middle"
            >
              <el-form-item prop="username">
                <el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="用户名/手机号/邮箱">
                  <svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
                </el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input
                  v-model="loginForm.password"
                  type="password"
                  auto-complete="off"
                  placeholder="密码"
                  @keyup.enter.native="handleLogin"
                >
                  <svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
                </el-input>
              </el-form-item>
              <el-form-item prop="code">
                <el-input
                  v-model="loginForm.code"
                  auto-complete="off"
                  placeholder="验证码"
                  style="width: 63%"
                  @keyup.enter.native="handleLogin"
                >
                  <svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
                </el-input>
                <div class="login-code">
                  <img :src="codeUrl" @click="getCode">
                </div>
              </el-form-item>
              <el-checkbox v-model="loginForm.rememberMe" :style="{'--fill-color':'rgb(246, 116, 61)'}" style="margin: 0 0 25px 0">
                记住我
              </el-checkbox>
              <el-form-item style="width: 100%">
                <el-button
                  :loading="loading"
                  size="medium"
                  type="primary"
                  class="login-btn"
                  style="width: 100%"
                  @click.native.prevent="handleLogin"
                >
                  <span v-if="!loading">登 录</span>
                  <span v-else>登 录 中...</span>
                </el-button>
              </el-form-item>
            </el-form>

            <!-- 其他方式登录 -->
            <div class="session-login-oauth">
              <div class="session-login-oauth__container">
                <div class="field">
                  <div class="ui horizontal divider session-login__oauth-title">
                    <span class="text-muted">
                      其他方式登录（敬请期待）
                    </span>
                  </div>
                </div>
                <div class="ui horizontal list session-oauth__list">
                  <div class="item">
                    <a href="https://www.qq.com" one-link-mark="yes" target="_blank">
                      <div class="git-other-login-icon">
                        <svg-icon icon-class="QQ" title="使用 QQ 帐号登录" />
                      </div>
                    </a>
                  </div>
                  <div class="item">
                    <a href="https://www.wechat.com" one-link-mark="yes" target="_blank">
                      <div class="git-other-login-icon">
                        <svg-icon icon-class="微信" title="使用微信帐号登录" />
                      </div>
                    </a>
                  </div>
                  <div class="item">
                    <a href="https://www.weibo.com" one-link-mark="yes" target="_blank">
                      <div class="git-other-login-icon">
                        <svg-icon icon-class="微博" title="使用微博帐号登录" />
                      </div>
                    </a>
                  </div>
                  <div class="item" style="cursor: default">
                    <!--                    <a href="https://www.weibo.com" one-link-mark="yes" target="_blank">-->
                    <div class="git-other-login-icon">
                      <svg-icon icon-class="问号" title="使用其他帐号登录" />
                    </div>
                    <!--                    </a>-->
                  </div>
                </div>
              </div>
            </div>

          </div>

        </div>
      </div>
    </div>
  </div>

</template>

<script>
import Backgroud from '@/assets/images/user/background.jpg'
import Code from '@/assets/images/code.png'
import { frontGetCodeImg } from '@/api/front/auth/customerAuthorization'
import Cookies from 'js-cookie'
import { encrypt } from '@/utils/rsaEncrypt'
import Config from '@/settings'
import FamousSayings from '@/views/front/FamousSayings.json'

export default {
  name: 'Index',
  components: {},
  data() {
    return {
      Backgroud: Backgroud,
      // 登录表单数据
      loginForm: {
        // 用户名
        username: '',
        // 密码
        password: '',
        // 验证码
        code: '',
        // 记住我
        rememberMe: false,
        // uuid
        uuid: ''
      },
      // 验证码图片链接
      codeUrl: Code,
      // 登录按钮loading状态
      loading: false,
      // 登录表单验证对象
      loginRules: {
        username: [{ required: true, message: '账号不能为空', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }],
        code: [{ required: true, message: '验证码不能为空', trigger: 'change' }] // change数据改变时校验
      },
      redirect: undefined,
      // cookie中的加密密码
      cookiePass: '',

      // 名人名言
      FamousSaying: {
        name: '谢礼',
        title: '与你基金创始人',
        joke: '“ 诺安人没有撤退可言，小跌小加，大跌大加。”'
      }
    }
  },
  // immediate: true 说明加载登录页面时就会执行handler函数，handler的第一个参数表示to,
  // 加载登录页后，直接获取，登录页地址栏的的redirect参数，赋值给this.redirect
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  mounted() {
    this.initCanvas()
  },
  created() {
    // 获取验证码
    this.getCode()
    // 获取用户名密码等cookie
    this.getCookie()
    // token过期提示
    this.point()

    // 取随机名人名言
    const ranNumber = Math.random()
    console.log(ranNumber)
    if (ranNumber < 0.5) {
      this.FamousSaying = FamousSayings[0]
    } else {
      this.FamousSaying = FamousSayings[1]
    }
  },
  methods: {

    // 点击验证码图片，获取验证码
    getCode() {
      frontGetCodeImg().then(res => {
        this.codeUrl = res.img
        this.loginForm.uuid = res.uuid
      })
    },
    // 获取用户名密码等cookie
    getCookie() {
      const username = Cookies.get('username')
      let password = Cookies.get('password')
      const rememberMe = Cookies.get('rememberMe')
      // 保存cookie里面的加密后的密码
      this.cookiePass = password === undefined ? '' : password
      password = password === undefined ? this.loginForm.password : password
      this.loginForm = {
        username: username === undefined ? this.loginForm.username : username,
        password: password,
        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
        code: ''
      }
    },
    // 处理登录事件
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        const user = {
          username: this.loginForm.username,
          password: this.loginForm.password,
          rememberMe: this.loginForm.rememberMe,
          code: this.loginForm.code,
          uuid: this.loginForm.uuid
        }
        if (user.password !== this.cookiePass) {
          user.password = encrypt(user.password)
        }
        if (valid) {
          this.loading = true
          if (user.rememberMe) {
            Cookies.set('username', user.username, { expires: Config.passCookieExpires })
            Cookies.set('password', user.password, { expires: Config.passCookieExpires })
            Cookies.set('rememberMe', user.rememberMe, { expires: Config.passCookieExpires })
          } else {
            Cookies.remove('username')
            Cookies.remove('password')
            Cookies.remove('rememberMe')
          }
          // 调用Vuex Action：Login
          this.$store.dispatch('FrontLogin', user).then(() => {
            this.loading = false
            this.$router.push({ path: this.redirect || '/' })
          }).catch(() => {
            this.loading = false
            this.getCode()
          })
        } else {
          console.log('提交错误！')
          return false
        }
      })
    },
    // token过期提示
    point() {
      const point = Cookies.get('point') !== undefined
      if (point) {
        this.$notify({
          title: '提示',
          message: '当前登录状态已过期，请重新登录',
          type: 'warning',
          duration: 5000
        })
        Cookies.remove('point')
      }
    },
    initCanvas() {
      // 可调参数
      // const BACKGROUND_COLOR = '#5582F3' // 背景颜色
      const BACKGROUND_COLOR = '#ffffff' // 背景颜色
      const POINT_NUM = 100 // 星星数目
      // const POINT_COLOR = 'rgba(255,255,255,1)' // 点的颜色
      const POINT_COLOR = '#f38d30' // 点的颜色
      const LINE_LENGTH = 10000 // 点之间连线长度(的平方)

      // 创建背景画布
      const cvs = document.getElementById('canvas')
      cvs.width = window.innerWidth
      cvs.height = window.innerHeight
      cvs.style.cssText = 'position:fixed;top:0px;left:0px;z-index:-1;opacity:1.0;'
      // 增加一个canvas元素，会导致所有页面都有
      // document.body.appendChild(cvs)

      const ctx = cvs.getContext('2d')

      // eslint-disable-next-line no-unused-vars
      const startTime = new Date().getTime()

      // 随机数函数
      // eslint-disable-next-line no-unused-vars
      function randomInt(min, max) {
        return Math.floor((max - min + 1) * Math.random() + min)
      }

      function randomFloat(min, max) {
        return (max - min) * Math.random() + min
      }

      // 构造点类
      function Point() {
        this.x = randomFloat(0, cvs.width)
        this.y = randomFloat(0, cvs.height)

        // 速度
        var speed = randomFloat(0.2, 1)
        var angle = randomFloat(0, 2 * Math.PI)

        this.dx = Math.sin(angle) * speed
        this.dy = Math.cos(angle) * speed

        this.r = 1.2

        this.color = POINT_COLOR
      }

      Point.prototype.move = function() {
        this.x += this.dx
        if (this.x < 0) {
          this.x = 0
          this.dx = -this.dx
        } else if (this.x > cvs.width) {
          this.x = cvs.width
          this.dx = -this.dx
        }
        this.y += this.dy
        if (this.y < 0) {
          this.y = 0
          this.dy = -this.dy
        } else if (this.y > cvs.height) {
          this.y = cvs.height
          this.dy = -this.dy
        }
      }

      Point.prototype.draw = function() {
        ctx.fillStyle = this.color
        ctx.beginPath()
        ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2)
        ctx.closePath()
        ctx.fill()
      }

      const points = []

      function initPoints(num) {
        for (var i = 0; i < num; ++i) {
          points.push(new Point())
        }
      }

      const p0 = new Point() // 鼠标
      p0.dx = p0.dy = 0
      // eslint-disable-next-line no-unused-vars
      let degree = 2.5
      document.onmousemove = function(ev) {
        p0.x = ev.clientX
        p0.y = ev.clientY
      }
      document.onmousedown = function(ev) {
        degree = 5.0
        p0.x = ev.clientX
        p0.y = ev.clientY
      }
      document.onmouseup = function(ev) {
        degree = 2.5
        p0.x = ev.clientX
        p0.y = ev.clientY
      }
      window.onmouseout = function() {
        p0.x = null
        p0.y = null
      }

      function drawLine(p1, p2, deg) {
        var dx = p1.x - p2.x
        var dy = p1.y - p2.y
        var dis2 = dx * dx + dy * dy
        if (dis2 < 2 * LINE_LENGTH) {
          if (dis2 > LINE_LENGTH) {
            if (p1 === p0) {
              p2.x += dx * 0.03
              p2.y += dy * 0.03
            } else return
          }
          const t = (1.05 - dis2 / LINE_LENGTH) * 0.2 * deg
          // ctx.strokeStyle = 'rgba(0,0,0,' + t + ')'
          ctx.strokeStyle = 'rgba(243,141,48,' + t + ')'
          ctx.beginPath()
          ctx.lineWidth = 1.5
          ctx.moveTo(p1.x, p1.y)
          ctx.lineTo(p2.x, p2.y)
          ctx.closePath()
          ctx.stroke()
        }
        return
      }

      // 绘制每一帧
      function drawFrame() {
        cvs.width = window.innerWidth
        cvs.height = window.innerHeight
        ctx.fillStyle = BACKGROUND_COLOR
        ctx.fillRect(0, 0, cvs.width, cvs.height)

        const arr = (p0.x == null ? points : [p0].concat(points))
        for (var i = 0; i < arr.length; ++i) {
          for (var j = i + 1; j < arr.length; ++j) {
            drawLine(arr[i], arr[j], 1.0)
          }
          arr[i].draw()
          arr[i].move()
        }

        window.requestAnimationFrame(drawFrame)
      }

      initPoints(POINT_NUM)
      drawFrame()
    }
  }
}
</script>

<style lang="scss" scoped>
.session-wrapper {
  width: 100%;
  min-width: 1040px;
  min-height: 99.9vh;
  position: relative;
  box-sizing: inherit;

  .ui.container {
    position: absolute;
    top: 50%;
    left: 50%;
    //width: 1000px;
    padding: 0;
    z-index: 1;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 1040px;
    padding: 0 20px;
    margin: 0 auto;

    .session-body {
      display: flex;
      margin: auto;
      width: inherit;
      position: relative;
      box-shadow: 0px 20px 80px 0px rgb(0 0 0 / 30%);

      .session-sidebox {
        color: #fff;
        position: relative;
        padding: 64px 80px 48px;
        background: url('~@/assets/images/user/background.jpg');

        margin: 0 auto;
        width: 50%;
        min-height: 564px;

        .session-sidebox__container {
          position: relative;
          z-index: 1;
          height: 100%;
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          flex-direction: column;
          -webkit-box-pack: justify;
          -ms-flex-pack: justify;
          justify-content: space-between;

          .session-sidebox__header {
            .session-sidebox__logo img {
              width: 166px;

              // 图片模糊问题处理
              image-rendering: -moz-crisp-edges; /* Firefox */
              image-rendering: -o-crisp-edges; /* Opera */
              image-rendering: -webkit-optimize-contrast; /*Webkit (non-standard naming) */
              image-rendering: crisp-edges;
              -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
              border: 0;
            }

            .session-sidebox__title {
              font-size: 40px;
              min-height: 1rem;
              margin: 0;
            }

            .session-sidebox__subtitle {
              display: block;
              color: white;
              margin: 0;
              font-weight: normal;
              font-size: 1.714rem;
              cursor: default;
            }
          }

          .session-sidebox__content {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;

            .session-sidebox-content__container {
              color: #fff;
              font-size: 14px;
              margin-top: 46px;

              .session-sidebox-comments__header {
                //opacity: 0.9;
                opacity: 1;

                .session-sidebox-comments__title {
                  font-size: 17px;
                }

                .session-sidebox-comments__position {

                }
              }

              .session-sidebox-comments__content {
                opacity: 1;
                margin-top: 16px;
                line-height: 1.71429;
                font-size: 20px;
                font-weight: bold;
              }
            }
          }

          .session-sidebox__footer {
            font-size: 14px;
            padding-top: 40px;
            margin-top: 24px;
            border-top: 1px solid rgba(255, 255, 255, 0.2);

            a {
              color: white;
              text-decoration: none;
              cursor: pointer;
              background: transparent;

              strong {
                font-weight: bold;
              }

              .session-sidebox__divider {
                margin: 0 7px;
              }

              .iconfont {
                font-size: 1em;
                -webkit-text-stroke-width: 0;
                display: inline-block;
                vertical-align: top;

                font-family: "iconfont" !important;
                font-style: normal;
                -webkit-font-smoothing: antialiased;
              }
            }

            .session-sidebox__icon-hot::after {
              content: 'hot';
              position: absolute;
              font-size: 12px;
              padding: 2px 6px;
              border-radius: 1px;
              margin-top: -12px;
              background-color: #C71D23;
              -webkit-transform: scale(0.84);
              transform: scale(0.84);
            }

          }
        }
      }

      .session-form {
        background: rgba(255, 255, 255, 0.9);
        margin: 0 auto;
        width: 50%;
        min-height: 564px;

        .session-form__container {
          height: 100%;
          padding: 64px 70px 48px;
          position: relative;

          .session-form__header {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            margin-bottom: 24px;
            -webkit-box-pack: justify;
            -ms-flex-pack: justify;
            justify-content: space-between;
            -webkit-box-align: end;
            -ms-flex-align: end;
            align-items: flex-end;

            .session-form__title {
              display: inline-block;
              margin: 0;
              cursor: default;
            }

            .pull-right {
              float: right;
              box-sizing: inherit;

              .have-account{
                font-size: 14px;
                cursor: default;
              }

              a {
                font-size: 14px;
                text-decoration: none;
                cursor: pointer;
                color: #5582F3;
              }
            }
          }

          .session-login-oauth {
            margin-top: 44px;

            .session-login-oauth__container {
              padding-top: 24px;
              border-top: 1px solid #eeeeee;

              .text-muted{
                cursor: default;
              }

              .ui.horizontal.list {
                display: inline-block;
                font-size: 2em;
                list-style-type: none;
                padding: 20px 1em;
                display: -webkit-box !important;
                display: -ms-flexbox !important;
                display: flex !important;
                -webkit-box-pack: center !important;
                -ms-flex-pack: center !important;
                justify-content: space-around !important;

                .item{
                  //margin-right: 20px;
                }
              }
            }
          }
        }
      }
    }
  }

  .register-btn {
    width: 100%;
    font-size: 18px;
    line-height: 22px;
    padding: 8px 26px;
    font-weight: 500;
    color: #fff;
    background: #f38d30;
    box-shadow: 0px 0em 0px 0px rgb(39 41 43 / 15%) inset;
  }

}

// 表单项间距
.el-form-item {
  ::v-deep .el-form-item__content {
    line-height: 50px;
  }
}

.login-form {
  border-radius: 6px;
  background: #ffffff;
  width: 100%;

  .el-input {
    height: 38px;

    input {
      height: 38px;
    }
  }

  .input-icon {
    height: 15px;
    width: 14px;
    margin-left: 2px;
  }
}

.login-tip {
  font-size: 13px;
  text-align: center;
  color: #bfbfbf;
}

.login-code {
  width: 33%;
  display: inline-block;
  height: 38px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

//@media (max-width: 1040px){
//  .session-wrapper .container {
//    width: 768px !important;
//  }
//}

@media (max-width: 1040px){
  //.session-wrapper{
  //  //display: flex !important;
  //  //align-items: center !important;
  //
  //  .container{
  //    margin: 0 !important;
  //    left: 0 !important;
  //    right: 0 !important;
  //  }
  //}
  .session-wrapper .session-sidebox {
    width: 0 !important;
    display: none;
  }

  .session-wrapper .container{
    width: 500px !important;
  }
  .session-wrapper .session-form{
    width: 100% !important;
  }
}

//@media (max-width: 1230px){
//  .session-wrapper .container, .session-en-wrapper .container {
//    width: 1040px !important;
//  }
//}
.el-input{
  ::v-deep .el-input__inner:focus{
    border: 1px solid rgb(246, 116, 61);
  }
}
.login-btn {
  width: 100%;
  font-size: 18px;
  line-height: 22px;
  padding: 8px 26px;
  font-weight: 500;
  color: #fff;
  background: rgb(246, 116, 61);
  border: 1px solid rgb(246, 116, 61);
  box-shadow: 0px 0em 0px 0px rgb(39 41 43 / 15%) inset;
}

::v-deep .el-checkbox {
  .el-checkbox__label {
    color: var(--fill-color);
  }

  .el-checkbox__input.is-checked .el-checkbox__inner,
  .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: var(--fill-color);
    border-color: var(--fill-color)
  }

  .el-checkbox__input.is-focus .el-checkbox__inner,
  .el-checkbox__inner:hover {
    border-color: var(--fill-color);
  }
}
</style>
